import { APILoader, Map, Marker, NavigationControl } from '@uiw/react-baidu-map';
import { useIntl } from '@umijs/max';
import { Input } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import Styles from '../index.less';
const { Search } = Input;

interface MapComponentProps {
  width?: string | number;
  height?: string | number;
  style?: React.CSSProperties;
  center: { lng: number; lat: number };
  zoom?: number;
  markerPosition: { lng: number; lat: number } | null;
  setMarkerPosition: (position: { lng: number; lat: number } | null) => void;
  onSelectPoint: (locationPoint: { address: string; point: { lng: number; lat: number } }) => void;
}

const MapComponent: React.FC<MapComponentProps> = ({
  width = '100%',
  height = 300,
  style,
  center,
  zoom = 15,
  markerPosition,
  setMarkerPosition,
  onSelectPoint,
}) => {
  const [searchCity, setSearchCity] = useState<string>('');
  const [mapCenter, setMapCenter] = useState<{ lng: number; lat: number }>(center);
  const mapRef = useRef<any>(null);
  const intl = useIntl();
  const handleMapClick = (e: any) => {
    const { lng, lat } = e.point;
    setMarkerPosition({ lng, lat });
    const geocoder = new (window as any).BMap.Geocoder();
    geocoder.getLocation(e.point, (result: any) => {
      const address = result.address;
      onSelectPoint({ address, point: { lng, lat } });
    });
  };

  const handleSearch = () => {
    const geocoder = new (window as any).BMap.Geocoder();
    geocoder.getPoint(searchCity, (point: any) => {
      if (point) {
        setMapCenter({ lng: point.lng, lat: point.lat });
        setMarkerPosition({ lng: point.lng, lat: point.lat }); // 在搜索结果位置添加标记
        if (mapRef.current && mapRef.current.map) {
          mapRef.current.map.centerAndZoom(point, mapRef.current.map.getZoom());
        }
        // 获取地址并同步到表单
        geocoder.getLocation(point, (result: any) => {
          const address = result.address;
          onSelectPoint({ address, point: { lng: point.lng, lat: point.lat } });
        });
      } else {
        alert(intl.formatMessage({ id: 'siteManage.cityNotFount' }));
      }
    });
  };

  useEffect(() => {
    if (mapRef.current && mapRef.current.map) {
      mapRef.current.map.centerAndZoom(
        new (window as any).BMap.Point(mapCenter.lng, mapCenter.lat),
        zoom,
      );
    }
  }, [mapCenter, zoom]);

  return (
    <div style={{ width, height, ...style }} className={Styles.locationMap}>
      <Search
        className={Styles.locationSearch}
        placeholder={intl.formatMessage({ id: 'siteManage.cityName' })}
        size="small"
        onChange={(e) => setSearchCity(e.target.value)}
        onSearch={handleSearch}
        style={{ width: 200 }}
      />
      <APILoader akay="9BH7uycgzsSquur6hRjeNPNiJZoXgWN8">
        <Map
          center={mapCenter}
          zoom={zoom}
          style={{ height: '100%', width: '100%' }}
          onClick={handleMapClick}
          enableScrollWheelZoom={true}
          ref={(instance) => {
            if (instance && !mapRef.current) {
              mapRef.current = instance;
            }
          }}
        >
          {markerPosition && <Marker position={markerPosition} />}
          <NavigationControl />
        </Map>
      </APILoader>
    </div>
  );
};

export default MapComponent;
